<template>
  <div class="wrapper flex flex-direction-column">
    <div class="flex-1">
      <div>
        <img
          :src="xsImg"
          alt=""
        >
      </div>
      <div class="input">
        <div class="input-title">我想对你说</div>
        <div class="input-search">
          <van-cell-group class="van-cell-group cell-border">
            <van-field
              v-model="formParam.name"
              placeholder="我想对你说"
            >
            </van-field>
            <van-button
              class="search-btn"
              size="small"
              type="info"
              :loading="loading"
              loading-type="spinner"
              loading-text="正在查询..."
              icon="search"
              @click="searchFn"
            ></van-button>
          </van-cell-group>

        </div>
      </div>
      <van-divider>我想对你说</van-divider>
    </div>
    <div
      ref="box"
      class="list flex-1"
    >
      <van-list>
        <van-cell
          v-for="(item,index) in list"
          :key="index"
          :title="item.remark"
          :label="'时间: ' + item.leaveDate"
        />
      </van-list>
      <div class="footer-pd"></div>
    </div>

    <van-search
      class="sms-send"
      v-model="formParam.remark"
      show-action
      placeholder="请输入你想对我说的"
      left-icon="chat-o"
    >
      <template #action>
        <div
          class="sms-btn"
          @click="leaveFn"
        >发送</div>
      </template>
    </van-search>
  </div>
</template>

<script>
import { Toast } from 'vant';
import xs from '@public/img/xs.gif'

import { add, search } from '@/assets/api/home.js'
export default {
  components: {
  },
  props: {},
  data () {
    return {
      loading: false,
      xsImg: xs,
      list: [],
      formParam: {
        name: '',
        remark: ''
      }
    };
  },
  created () { },
  methods: {
    leaveFn () {
      add(this.formParam).then((res) => {
        console.log(res)
        if (res.result == 'success') {
          this.searchFn()
          return
        }
        Toast({
          message: res.msg
        });
      })
    },
    searchFn () {
      search({
        name: this.formParam.name
      }).then((res) => {
        console.log(res)
        if (res.result == 'success') {
          this.formParam.remark = ""
          this.list = res.data
          this.$refs.box.scrollTop = 0;
          return
        }
        Toast({
          message: res.msg
        });

      })
    }
  },
  mounted () {
    this.formParam = this.$route.query
  },
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  overflow: hidden;
  img {
    width: 100%;
  }
  .input {
    .input-title {
      width: 100%;
      text-align: center;
      font-size: 18px;
      padding: 20px 0;
    }
    .input-search {
      position: relative;
      border: 1px solid #d7d7d7;
      margin: 0 20px;
      border-radius: 10px;
      overflow: hidden;
      .search-btn {
        padding: 0 20px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        height: initial;
      }
    }
  }
  .sms-send {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #d7d7d7;
    padding: 10px 20px;
    .van-search__content {
      background: #fff;
    }
  }
  .sms-btn {
    color: #34a1ed;
  }
  .list {
    overflow: auto;
  }
  .footer-pd {
    padding: 30px;
  }
}
</style>
